﻿<!DOCTYPE html>
<html manifest="appcache.manifest">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no, email=no">
    <link rel="apple-touch-icon-precomposed" href="icon.png" />

    <title>我的WebApp</title>
    <link href="css/common.css" rel="stylesheet" />
    <script src="js/jquery.js"></script>
    <link href="js/jquery.mobile/jquery.mobile-1.3.2.css" rel="stylesheet" />
    <script src="js/jquery.mobile/jquery.mobile-1.3.2.js"></script>

    <script>
        function Msg(text) {
            $(".msg").html($(".msg").html() + "<br>" + "___" + text);
        }
        $(function () {
            $("#qq").click(function () {
                Msg("刷新click");
                location.reload();
            });
            //屏幕旋转事件
            $(window).on("orientationchange", function (event) {
                $("#orientation").text("This device is in " + event.orientation + " mode!");
            });
        })
        // 判断屏幕是否旋转
        function orientationChange() {
            switch (window.orientation) {
                case 0:
                    Msg("肖像模式 0,screen-width: " + screen.width + "; screen-height:" + screen.height);
                    break;
                case -90:
                    Msg("逆时针 -90,screen-width: " + screen.width + "; screen-height:" + screen.height);
                    break;
                case 90:
                    Msg("顺时针 90,screen-width: " + screen.width + "; screen-height:" + screen.height);
                    break;
                case 180:
                    Msg("风景模式 180,screen-width: " + screen.width + "; screen-height:" + screen.height);
                    break;
            };
        };
        // 添加事件监听 
        addEventListener('load', function () {
            orientationChange();
            window.onorientationchange = orientationChange;
        });
    </script>
    <style>
        .gHead { background: #FCCD00; }
        .gHead .title { font-size: 20px; text-shadow: 2px 2px 3px #fff; }


    </style>
</head>
<body>
    <header class="gHead clearfix">
        <div class="title align_center">HTML5 WebApp Test</div>
        <div></div>
    </header>
    <hr />
    <div class="gMain">
        <div class="msg"></div>
        <ul>
            <li></li>
        </ul>
    </div>
    <hr />
    <footer class="gFoot">
        <div class="align_center">
            版本号1.0 2013-09-23
        <a id="qq" data-role="button" data-icon="refresh" data-theme="b" data-inline="true" data-corners="true" data-shadow="true" data-mini="true" data-iconshadow="true" data-inline="true">刷新</a>
        </div>
    </footer>
</body>
</html>
